<template>
    <!-- <p is="Email" id="pp">动态组件</p> -->
    <div class="container">
        <button @click="handleClick(item)" :class="['tab-button',{active:item===sel}]" v-for="(item,index) in buttons"
            :key="index">{{item}}</button>
        <div class="tab" :is="com">123</div>
    </div>
</template>
<script>
    import Charge from './Charge.vue'
    import Home from "./Home.vue"
    import Mine from "./Mine.vue"
    import Email from "./Email.vue"
    // 所谓的动态组件就是通过is属性来切换组件名
    // 需求:
    //1.根据数据,将按钮显示出来
    //2.点击按钮的时候 添加激活的类名
    //3.点击的时候 组件也要进行响应的切换
    export default {
        data() {
            return {
                sel: "email", //点击按钮 选中的按钮
                buttons: ['email', 'mine', 'charge', 'home']
            }
        },
        computed: {
            com() {
                //首先将首字母截取出来
                let firstLetter = this.sel.substr(0, 1)
                //大写的字母
                let uppercaseLetter = firstLetter.toUpperCase()
                // console.log(firstLetter)
                let res = this.sel.replace(firstLetter, uppercaseLetter)

                return res
            }
        },
        methods: {
            handleClick(current) {
                this.sel = current;
            }
        },
        components: {
            Charge,
            Home,
            Email,
            Mine
        },
        mounted(){
            console.log('组件被挂载了')
        },
        destroyed(){
            console.log('组件被销毁了')
        },
        activated() {
            console.log('组件被激活了')
        },
        deactivated() {
            console.log('组件被缓存了')
        }
    }
</script>
<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }

    h1 {
        margin: 0;
    }
</style>